<script setup>
const currentTime = ref(new Date())
let timer = null

const updateTime = () => {
  currentTime.value = new Date()
}

const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

onMounted(() => {
  updateTime()
  timer = window.setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})
</script>
<template>
  <div class="header" @click="$router.push('/home')">
    <div class="left">浙江乡村大脑</div>
    <div class="right">{{ formatDate(currentTime) }}</div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  width: 100%;
  background-image: url('@/assets/images/header/page-header.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 85px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 48px;
  margin-bottom: 15px;
  pointer-events:all;
  cursor: pointer;
  .left {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    text-align: center;
    margin-bottom: 15px;
  }
  .right {
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    vertical-align: middle;
    color: #7ac7ff;
    margin-bottom: 10px;
  }
  .left,
  .right {
    font-family: PingFang SC;
    color: #7ac7ff;
  }
}
</style>
